<template>
 
  <el-dialog title="做答数据" :visible.sync="dialog.dialogVisible" @close="close" :width="dialog.width">
   
    功能尚未完成，任需努力
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { ref,  reactive ,watch, onMounted} from "@vue/composition-api";
// 使用蚂蚁的g2做数据分析展示
export default {
  name: "itemdata",
  props: {
    flag: {
      type: Boolean,
      default: false,
      must:true
    },
    components:{
      g2:{
        template:"<div id='c1222'></div>"
      }
    }
  },
  setup(props, {attrs, emit, root, refs }) {
    const chart = reactive({})  ;
   
    // console.log(data2);

    const myinit=()=>{
      const data2 =reactive([
        { genre: 'Sports', sold: 275 },
        { genre: 'Strategy', sold: 115 },
        { genre: 'Action', sold: 120 },
        { genre: 'Shooter', sold: 350 },
        { genre: 'Other', sold: 150 },
      ]);
      chart.value = new G2.Chart({
        container: "c1",
        width: 600,
        height: 300
      })
      console.log(chart)
      chart.source(data2);
      chart.interval()
        .position("genre*sold")
        .color("genre") ;
    }
    onMounted(()=>{
      //  myinit();
       console.log(document.getElementById('c1'),"===========");
    }) ;
  
    const dialog = reactive({
      dialogVisible : false,
      width: "1200px"
    });
    watch([
      () => props.flag 
    ], ([flag]) => {
      console.log(flag)
      dialog.dialogVisible = props.flag;
      if(flag == true){
        console.log(document.getElementById('c1'));
        // myinit();
      }
    })

    const close = ()=>{
      dialog.dialogVisible = false;
      emit("update:flag", false);
    }
    return {
      dialog,chart,
      close    
    };
  }
};
</script>

<style lang="scss">
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    font-size: 14px;
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
